<template>
    <view class="menu-container">
        <!-- #ifndef MP -->
        <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="navbar-content">
                <view class="back-icon" @tap="goBack">
                    <view class="icon-back"></view>
                </view>
                <view class="title">广东广州东方宝泰永旺店</view>
            </view>
        </view>
        <!-- #endif -->

        <view class="page-content" :style="contentStyle">
            <view class="menu-page" :class="{ 'hide': showSpecPage }">
                <view class="content-wrapper">
                    <!-- 左侧菜单 -->
                    <scroll-view class="menu-left" scroll-y>
                        <view v-for="(item, index) in menuList" :key="index"
                            :class="['menu-item', currentIndex === index ? 'active' : '']" @tap="switchMenu(index)">
                            <text :class="['menu-text', currentIndex === index ? 'active-text' : '']">
                                {{ item.name }}
                            </text>
                        </view>
                    </scroll-view>

                    <!-- 右侧商品列表 -->
                    <scroll-view class="menu-right" scroll-y>
                        <view class="section-title">{{ menuList[currentIndex].name }}</view>
                        <view class="product-list">
                            <view class="product-item" v-for="(product, index) in productList" :key="index">
                                <image class="product-image" :src="product.image" mode="aspectFill" />
                                <view class="product-info">
                                    <view class="product-name">{{ product.name }}</view>
                                    <view class="product-price">
                                        <text class="discount-price">¥{{ product.discountPrice }}起</text>
                                        <text class="original-price">¥{{ product.originalPrice }}</text>
                                        <text class="save-price">省¥{{ product.savePrice }}</text>
                                    </view>
                                    <view class="calorie-tag">
                                        <text>低GI {{ product.gi }}</text>
                                        <text>{{ product.calorie }}kcal</text>
                                    </view>
                                    <view class="add-btn" @tap="addToCart(product)">+</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>

                <!-- 购物车列表 -->
                <view class="cart-list" v-if="cartList.length > 0">
                    <view class="cart-item" v-for="(item, index) in cartList" :key="index">
                        <view class="item-info">
                            <text class="item-name">{{ item.name }}</text>
                            <text class="item-spec">{{ item.specText }}</text>
                        </view>
                        <view class="item-price">¥{{ item.price }}</view>
                        <view class="item-control">
                            <view class="minus" @tap="updateCartItemCount(index, -1)">-</view>
                            <text class="count">{{ item.count }}</text>
                            <view class="plus" @tap="updateCartItemCount(index, 1)">+</view>
                        </view>
                    </view>
                </view>

                <!-- 底部购物车栏 -->
                <view class="cart-bar" v-if="cartList.length > 0">
                    <view class="cart-info">
                        <text class="total-price">¥{{ totalPrice }}起</text>
                    </view>
                    <view class="submit-btn" @tap="goToConfirm">选好了 ></view>
                </view>
            </view>

            <!-- 规格选择页面 -->
            <view class="spec-page" :class="{ 'show': showSpecPage }">
                <view class="spec-header">
                    <view class="back-btn" @tap="hideSpecPage">
                        <text class="iconfont">&#xe679;</text>
                    </view>
                    <text class="title">{{ currentProduct ? currentProduct.name : '' }}</text>
                </view>

                <view class="spec-content">
                    <!-- 杯型 -->
                    <view class="spec-section">
                        <view class="section-title">
                            <text class="red-line"></text>
                            <text>杯型</text>
                        </view>
                        <view class="spec-options">
                            <view v-for="(item, index) in specifications.cupSize" :key="index"
                                :class="['spec-option', selectedSpecs.cupSize === item ? 'active' : '']"
                                @tap="selectSpec('cupSize', item)">
                                {{ item }}
                            </view>
                        </view>
                    </view>

                    <!-- 温度 -->
                    <view class="spec-section">
                        <view class="section-title">
                            <text class="red-line"></text>
                            <text>温度</text>
                        </view>
                        <view class="spec-options">
                            <view v-for="(item, index) in specifications.temperature" :key="index"
                                :class="['spec-option', selectedSpecs.temperature === item ? 'active' : '']"
                                @tap="selectSpec('temperature', item)">
                                {{ item }}
                            </view>
                        </view>
                    </view>

                    <!-- 甜度 -->
                    <view class="spec-section">
                        <view class="section-title">
                            <text class="red-line"></text>
                            <text>甜度</text>
                        </view>
                        <view class="spec-options">
                            <view v-for="(item, index) in specifications.sweetness" :key="index"
                                :class="['spec-option', selectedSpecs.sweetness === item ? 'active' : '']"
                                @tap="selectSpec('sweetness', item)">
                                {{ item }}
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 规格页底部 -->
                <view class="spec-footer">
                    <view class="price">¥{{ currentProduct ? currentProduct.discountPrice : '0.00' }}</view>
                    <view class="add-to-cart" @tap="confirmSpec">加入购物车</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: 0,
            menuList: [
                { name: '低负担专区' },
                { name: '原叶鲜奶茶' },
                { name: '活力轻果茶' },
                { name: '青云雪顶集' },
                { name: '远山鲜初露' }
            ],
            productList: [
                {
                    name: '伯牙绝弦',
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250125/7be18ea91109d91fb1e2c13c85a18573.jpg',
                    discountPrice: '4.00',
                    originalPrice: '16',
                    savePrice: '12.00',
                    gi: 14,
                    calorie: 130
                },
                {
                    name: '青青播山',
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250125/7be18ea91109d91fb1e2c13c85a18573.jpg',
                    discountPrice: '3.80',
                    originalPrice: '15',
                    savePrice: '11.20',
                    gi: 21,
                    calorie: 143
                },
                {
                    name: '桂馥兰香',
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250125/7be18ea91109d91fb1e2c13c85a18573.jpg',
                    discountPrice: '4.00',
                    originalPrice: '16',
                    savePrice: '12.00',
                    gi: 19,
                    calorie: 121
                },
                {
                    name: '万里木兰',
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250125/7be18ea91109d91fb1e2c13c85a18573.jpg',
                    discountPrice: '4.00',
                    originalPrice: '16',
                    savePrice: '12.00',
                    gi: 27,
                    calorie: 142
                }
            ],
            showSpecPage: false,
            currentProduct: null,
            cartList: [],
            specifications: {
                cupSize: ['中杯'],
                temperature: ['标准冰', '少冰', '去冰', '热'],
                sweetness: ['标准糖', '少糖', '微糖', '不另外加糖']
            },
            selectedSpecs: {
                cupSize: '中杯',
                temperature: '标准冰',
                sweetness: '标准糖'
            },
            statusBarHeight: 0
        }
    },
    computed: {
        totalPrice() {
            return this.cartList.reduce((total, item) => total + item.price * item.count, 0).toFixed(2)
        },
        contentStyle() {
            // #ifndef MP
            return {
                paddingTop: (this.statusBarHeight + 44) + 'px'
            }
            // #endif
            // #ifdef MP
            return {}
            // #endif
        }
    },
    created() {
        // #ifndef MP
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
        // #endif
    },
    methods: {
        switchMenu(index) {
            this.currentIndex = index
        },
        addToCart(product) {
            this.currentProduct = product
            this.showSpecPage = true
            // 重置选择的规格
            this.selectedSpecs = {
                cupSize: '中杯',
                temperature: '标准冰',
                sweetness: '标准糖'
            }
        },
        hideSpecPage() {
            this.showSpecPage = false
            this.currentProduct = null
        },
        selectSpec(type, value) {
            this.selectedSpecs[type] = value
        },
        confirmSpec() {
            const specText = `${this.selectedSpecs.cupSize},${this.selectedSpecs.temperature},${this.selectedSpecs.sweetness}`

            // 查找是否已存在相同商品相同规格
            const existingItemIndex = this.cartList.findIndex(item =>
                item.name === this.currentProduct.name &&
                item.specText === specText
            )

            if (existingItemIndex > -1) {
                // 如果存在，数量加1
                this.cartList[existingItemIndex].count++
            } else {
                // 如果不存在，添加新项
                const cartItem = {
                    ...this.currentProduct,
                    specText,
                    count: 1,
                    price: Number(this.currentProduct.discountPrice)
                }
                this.cartList.push(cartItem)
            }
            this.hideSpecPage()
            uni.showToast({
                title: '已加入购物车',
                icon: 'success'
            })
        },
        updateCartItemCount(index, delta) {
            const item = this.cartList[index]
            const newCount = item.count + delta
            if (newCount === 0) {
                this.cartList.splice(index, 1)
            } else {
                item.count = newCount
            }
        },
        goToConfirm() {
            // 跳转到确认订单页面
            uni.navigateTo({
                url: '/pagesZone/drink/drink-confirm'
            })
        },
        goBack() {
            uni.navigateBack({
                delta: 1
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.menu-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
    position: relative;
}

.menu-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease-out;

    &.hide {
        transform: translateX(-100%);
    }
}

.content-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.menu-left {
    width: 160rpx;
    height: 100%;
    background-color: #fff;
    border-right: 1rpx solid #eee;

    .menu-item {
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        position: relative;

        .menu-text {
            font-size: 26rpx;
            color: #666;

            &.active-text {
                color: #ff0000;
                font-weight: bold;
            }
        }

        &.active {
            background-color: #f8f8f8;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 6rpx;
                height: 36rpx;
                background-color: #ff0000;
            }
        }
    }
}

.menu-right {
    flex: 1;
    height: 100%;
    padding: 20rpx;

    .section-title {
        font-size: 28rpx;
        font-weight: bold;
        padding: 10rpx 0;
        color: #333;
    }

    .product-list {
        .product-item {
            background-color: #fff;
            border-radius: 16rpx;
            margin-bottom: 20rpx;
            padding: 24rpx;
            display: flex;
            position: relative;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

            .product-image {
                width: 180rpx;
                height: 180rpx;
                border-radius: 12rpx;
            }

            .product-info {
                flex: 1;
                padding-left: 24rpx;
                position: relative;

                .product-name {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }

                .product-price {
                    margin-top: 12rpx;

                    .discount-price {
                        color: #ff0000;
                        font-size: 32rpx;
                        font-weight: bold;
                    }

                    .original-price {
                        color: #999;
                        font-size: 24rpx;
                        text-decoration: line-through;
                        margin-left: 12rpx;
                    }

                    .save-price {
                        color: #ff0000;
                        font-size: 24rpx;
                        display: block;
                        margin-top: 8rpx;
                    }
                }

                .calorie-tag {
                    margin-top: 16rpx;
                    display: flex;
                    gap: 12rpx;

                    text {
                        background-color: #f0f9eb;
                        color: #67c23a;
                        padding: 4rpx 12rpx;
                        border-radius: 6rpx;
                        font-size: 22rpx;
                    }
                }

                .add-btn {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 44rpx;
                    height: 44rpx;
                    line-height: 40rpx;
                    text-align: center;
                    background-color: #ff0000;
                    color: #fff;
                    border-radius: 50%;
                    font-size: 36rpx;
                }
            }
        }
    }
}

.spec-page {
    position: absolute;
    left: 100%;
    right: -100%;
    top: 0;
    bottom: 0;
    background: #fff;
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;

    &.show {
        transform: translateX(-100%);
    }

    .spec-header {
        height: 88rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .back-btn {
            padding: 20rpx;
            margin-left: -20rpx;
        }

        .title {
            flex: 1;
            text-align: center;
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    .spec-content {
        flex: 1;
        padding: 30rpx;
        overflow-y: auto;

        .spec-section {
            margin-bottom: 40rpx;

            .section-title {
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;

                .red-line {
                    width: 6rpx;
                    height: 32rpx;
                    background: #ff0000;
                    margin-right: 20rpx;
                }
            }

            .spec-options {
                display: flex;
                flex-wrap: wrap;
                gap: 20rpx;

                .spec-option {
                    padding: 12rpx 30rpx;
                    background: #f5f5f5;
                    border-radius: 30rpx;
                    font-size: 26rpx;
                    color: #333;

                    &.active {
                        background: #ff0000;
                        color: #fff;
                    }
                }
            }
        }
    }

    .spec-footer {
        height: 100rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        border-top: 1rpx solid #f5f5f5;

        .price {
            flex: 1;
            font-size: 36rpx;
            color: #ff0000;
            font-weight: bold;
        }

        .add-to-cart {
            background: #ff0000;
            color: #fff;
            padding: 20rpx 40rpx;
            border-radius: 40rpx;
            font-size: 28rpx;
        }
    }
}

.cart-list {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 100rpx;
    background: #fff;
    max-height: 400rpx;
    overflow-y: auto;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .cart-item {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .item-info {
            flex: 1;

            .item-name {
                font-size: 28rpx;
                color: #333;
            }

            .item-spec {
                font-size: 24rpx;
                color: #999;
                margin-top: 4rpx;
            }
        }

        .item-price {
            font-size: 28rpx;
            color: #ff0000;
            margin-right: 30rpx;
        }

        .item-control {
            display: flex;
            align-items: center;

            .minus,
            .plus {
                width: 44rpx;
                height: 44rpx;
                background: #ff0000;
                color: #fff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
            }

            .count {
                margin: 0 20rpx;
                font-size: 28rpx;
            }
        }
    }
}

.cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background: #ff0000;
    display: flex;
    align-items: center;
    padding: 0 30rpx;

    .cart-info {
        flex: 1;

        .total-price {
            color: #fff;
            font-size: 36rpx;
            font-weight: bold;
        }
    }

    .submit-btn {
        color: #fff;
        font-size: 32rpx;
        padding: 20rpx 40rpx;
    }
}

/* #ifndef MP */
.custom-navbar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;

    .navbar-content {
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        position: relative;

        .back-icon {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon-back {
                width: 12px;
                height: 12px;
                border-left: 2px solid #333;
                border-bottom: 2px solid #333;
                transform: rotate(45deg);
            }
        }

        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            color: #333;
            font-weight: 500;
        }
    }
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* #endif */
</style>
